<template>
    <ele-modal width="880px" :visible="visible" :append-to-body="true" :close-on-click-modal="true"
        custom-class="ele-dialog-form" :title="isUpdate ? '修改视频分类' : '添加视频分类'" @update:visible="updateVisible">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row :gutter="15">
                <el-col :md="12" :sm="12" :xs="24">
                    <el-form-item label="资源名称" prop="name">
                        <el-input clearable :maxlength="100" v-model="form.name" placeholder="请输入资源名称" />
                    </el-form-item>
                </el-col>
                <el-col :md="12" :sm="12" :xs="24">
                    <el-form-item label="顺序" prop="index">
                        <el-input clearable :maxlength="200" v-model="form.index" placeholder="请输入顺序" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :md="12" :sm="12" :xs="24">
                    <el-form-item label="是否推荐" prop="isRecommend">
                        <el-select clearable class="ele-block" v-model="form.isRecommend" placeholder="请选择是否推荐">
                            <el-option label="正常" :value="0" />
                            <el-option label="推荐" :value="1" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :sm="12" :xs="24">
                    <el-form-item label="状态" prop="status">
                        <el-select clearable class="ele-block" v-model="form.status" placeholder="请选择状态">
                            <el-option label="隐藏" :value="0" />
                            <el-option label="显示" :value="1" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template v-slot:footer>
            <el-button @click="updateVisible(false)">取消</el-button>
            <el-button type="primary" :loading="loading" @click="save">
                保存
            </el-button>
        </template>
    </ele-modal>
</template>

<script>
import { addVideoType, updateVideoType } from "@/api/videoType";

export default {
    props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object
    },
    data() {
        const defaultForm = {
            _id: null,
            name: "",
            index: "",
            isRecommend: null,
            status: null
        };
        return {
            defaultForm,
            form: { ...defaultForm },
            // 表单验证规则
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入资源名称',
                        trigger: 'blur'
                    }
                ],
                index: [
                    {
                        required: true,
                        message: '请输入接口地址',
                        trigger: 'blur'
                    }
                ],
                data: [
                    {
                        required: true,
                        message: '请输入参数',
                        trigger: 'blur'
                    }
                ],
                time: [
                    {
                        required: true,
                        message: '请输入采集时间',
                        trigger: 'blur'
                    }
                ],
                isRecommend: [
                    {
                        required: true,
                        message: '请选择采集',
                        trigger: 'change'
                    }
                ],
                status: [
                    {
                        required: true,
                        message: '请选择状态',
                        trigger: 'change'
                    }
                ]
            },
            // 提交状态
            loading: false,
            // 是否是修改
            isUpdate: false
        };
    },
    computed: {
        // 是否开启响应式布局
        styleResponsive() {
            return this.$store.state.theme.styleResponsive;
        }
    },
    watch: {
        visible(visible) {
            if (visible) {
                if (this.data) {
                    let data = { ...this.data }
                    this.$util.assignObject(this.form, {
                        ...data,
                    });
                    this.isUpdate = true;
                } else {
                    this.isUpdate = false;
                }
            } else {
                this.$refs.form.clearValidate();
                this.form = { ...this.defaultForm };
            }
        }
    },
    methods: {
        /* 保存编辑 */
        save() {
            this.$refs.form.validate((valid) => {
                if (!valid) {
                    return false;
                }
                this.loading = true;
                const data = {
                    ...this.form
                };

                const saveOrUpdate = this.isUpdate ? updateVideoType : addVideoType;
                saveOrUpdate(data)
                    .then((res) => {
                        console.log('结果', res);
                        this.loading = false;
                        this.$message.success('保存成功');
                        this.updateVisible(false);
                        this.$emit('done');
                    })
                    .catch((msg) => {
                        this.loading = false;
                        this.$message.error(msg);
                    });
            });
        },

        /* 更新visible */
        updateVisible(value) {
            this.$emit('update:visible', value);
        }
    }
};
</script>

<style lang="scss" scoped>

</style>